<template>
	<view class="quanju">
		<scroll-view scroll-y="true" class="scroll-container">
			<!-- 泉州风光轮播区 -->
			<view class="section-container">
				<view class="section-padding">
					<view class="section-title">泉州风光</view>
					<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" class="swiper-container">
						<swiper-item>
							<image src="/static/city1.png" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/city2.jpg" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
						<swiper-item>
							<image src="/static/city3.jpg" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<!-- 泉州介绍区 -->
			<view class="section-container">
				<view class="section-padding">
					<view class="section-title">泉州介绍</view>
					<view class="section-subtitle">海上丝绸之路起点 - 泉州</view>

					<!-- 历史文化段落 -->
					<view class="intro-row">
						<text class="intro-label">历史文化：</text>
						<text class="intro-content">泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路"起点，宋元时期被誉为“东方第一大港"。</text>
					</view>

					<!-- 著名景点段落 -->
					<view class="intro-row">
						<text class="intro-label">著名景点：</text>
						<text class="intro-content">清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</text>
					</view>

					<!-- 特色文化（最终优化版） -->
					<view class="intro-row">
						<text class="intro-label">特色文化：</text>
						<view class="intro-content">
							<rich-text :nodes="richContent" class="culture-text"></rich-text>
						</view>
					</view>
				</view>
			</view>

			<!-- 进度条 -->
			<view class="section-container">
				<view class="section-padding">
					<view class="progress-text">当前进度: {{ percent }}%</view>
					<progress :percent="percent" show-info stroke-width="6" active />
				</view>
			</view>

			<!-- 三级联动选择器 -->
			<view class="section-container">
				<view class="section-padding">
					<view class="section-title">选择城市</view>
					<view class="current-selection">当前选择: {{ selectedProvince }} - {{ selectedCity }} -
						{{ selectedDistrict }}
					</view>
					<picker mode="multiSelector" :value="selectedIndices" :range="regionList" @change="onPickerChange"
						@columnchange="onColumnChange">
						<view class="picker-display">点击选择省市区</view>
					</picker>
				</view>
			</view>

			<!-- 偏好设置（最终优化版） -->
			<view class="section-container">
				<view class="section-padding">
					<view class="section-title">偏好设置</view>

					<!-- 出行方式 -->
					<view class="setting-row">
						<text class="setting-label">出行方式:</text>
						<view class="setting-value">
							<radio value="bus" :checked="travelMode === 'bus'" @click="setTravelMode('bus')">公交</radio>
							<radio value="self" :checked="travelMode === 'self'" @click="setTravelMode('self')">自驾
							</radio>
							<radio value="walk" :checked="travelMode === 'walk'" @click="setTravelMode('walk')">步行
							</radio>
						</view>
					</view>

					<!-- 显示推荐景点 -->
					<view class="setting-row">
						<text class="setting-label">显示推荐景点:</text>
						<view class="setting-value">
							<switch :checked="showRecommend" @change="toggleRecommend" class="switch-control"></switch>
						</view>
					</view>

					<!-- 探索半径（进度条） -->
					<view class="setting-row">
						<text class="setting-label">探索半径: {{ radius }}km</text>
						<view class="setting-value slider-container">
							<slider :value="radius" @change="setRadius" min="1" max="20" step="1" activeColor="#007AFF"
								backgroundColor="#E5E5E5" class="radius-slider"></slider>
						</view>
					</view>
				</view>
			</view>

			<!-- 媒体展示Video -->
			<view class="section-container">
				<view class="section-padding">
					<view class="section-title">泉州宣传</view>
					<video :src="videoUrl" controls :autoplay="false" :loop="false" class="city-video"
						@play="handlePlay" @pause="handlePause" @error="handleVideoError"></video>

					<view class="music-module">
						<view class="music-header">泉州背景音乐</view>
						<button class="play-button" @click="toggleMusic">
							{{ isPlaying ? '暂停' : '播放' }}
						</button>
						<view class="music-source">泉州南音 - 泉州传统乐团</view>
						<view class="progress-container">
							<slider class="progress-slider" :value="progress" @change="updateProgress"
								activeColor="#007AFF" backgroundColor="#E5E5E5" />

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false,
				audioContext: null,
				progress: 0,
				progressInterval: null,
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				richContent: '拥有 <span style="color:#007AFF;font-weight:bold">南音</span>、<span style="color:#007AFF;font-weight:bold">木偶戏</span>和<span style="color:#007AFF;font-weight:bold">闽南建筑</span>等丰富的非物质文化遗产。',
				percent: 60,
				regionList: [
					["福建省", "广东省"],
					["泉州市", "厦门市", "福州市"],
					["丰泽区", "鲤城区", "洛江区"]
				],
				selectedIndices: [0, 0, 0],
				selectedProvince: "福建省",
				selectedCity: "泉州市",
				selectedDistrict: "丰泽区",
				travelMode: 'bus',
				showRecommend: true,
				radius: 10,
				videoUrl: '/static/city-video.mp4'
			};
		},
		onReady() {
			this.audioContext = uni.createInnerAudioContext();
			this.audioContext.src = '/static/city-music.mp3';

			this.audioContext.onError((res) => {
				console.error('音频错误:', res);
			});

			this.audioContext.onPlay(() => {
				console.log('开始播放');
				this.isPlaying = true;
				this.startProgressUpdate();
			});

			this.audioContext.onPause(() => {
				console.log('暂停播放');
				this.isPlaying = false;
				this.stopProgressUpdate();
			});

			this.audioContext.onEnded(() => {
				console.log('播放结束');
				this.isPlaying = false;
				this.progress = 0;
				this.stopProgressUpdate();
			});

			this.audioContext.onTimeUpdate(() => {
				const duration = this.audioContext.duration;
				const currentTime = this.audioContext.currentTime;
				if (duration > 0) {
					this.progress = Math.min((currentTime / duration) * 100, 100);
				}
			});
		},
		methods: {
			onColumnChange(e) {
				const {
					column,
					value
				} = e.detail;
				const newIndices = [...this.selectedIndices];
				newIndices[column] = value;

				if (column === 0) {
					newIndices[1] = 0;
					newIndices[2] = 0;
					this.regionList[1] = value === 0 ? ["泉州市", "厦门市", "福州市"] : ["广州市", "深圳市", "佛山市"];
					this.regionList[2] = value === 0 ? ["丰泽区", "鲤城区", "洛江区"] : ["天河区", "越秀区", "海珠区"];
				} else if (column === 1) {
					newIndices[2] = 0;
					if (this.selectedIndices[0] === 0) {
						this.regionList[2] = value === 0 ? ["丰泽区", "鲤城区", "洛江区"] :
							value === 1 ? ["思明区", "湖里区", "集美区"] : ["鼓楼区", "台江区", "仓山区"];
					} else {
						this.regionList[2] = value === 0 ? ["天河区", "越秀区", "海珠区"] :
							value === 1 ? ["南山区", "福田区", "罗湖区"] : ["禅城区", "南海区", "顺德区"];
					}
				}
				this.selectedIndices = newIndices;
			},
			onPickerChange(e) {
				const {
					value
				} = e.detail;
				this.selectedIndices = value;
				this.selectedProvince = this.regionList[0][value[0]];
				this.selectedCity = this.regionList[1][value[1]];
				this.selectedDistrict = this.regionList[2][value[2]];
			},
			setTravelMode(mode) {
				this.travelMode = mode;
			},
			toggleRecommend(e) {
				this.showRecommend = e.detail.value;
			},
			setRadius(e) {
				this.radius = e.detail.value;
			},
			handlePlay() {
				console.log('视频播放');
			},
			handlePause() {
				console.log('视频暂停');
			},
			handleVideoError(e) {
				console.error('视频错误：', e.detail.errMsg);
				uni.showToast({
					title: '视频播放失败',
					icon: 'none',
				});
			},
			toggleMusic() {
				console.log('toggleMusic called, current state:', this.isPlaying);
				if (this.isPlaying) {
					this.audioContext.pause();
				} else {
					console.log('尝试播放音频');
					this.audioContext.play().catch(e => {
						console.error('播放失败:', e);
					});
				}
			},
			updateProgress(e) {
				const newProgress = e.detail.value;
				this.progress = newProgress;
				if (this.audioContext) {
					const duration = this.audioContext.duration;
					this.audioContext.seek((newProgress / 100) * duration);
				}
			},
			startProgressUpdate() {
				this.progressInterval = setInterval(() => {
					if (this.audioContext && this.isPlaying) {
						const duration = this.audioContext.duration;
						const currentTime = this.audioContext.currentTime;
						if (duration > 0) {
							this.progress = Math.min((currentTime / duration) * 100, 100);
						}
					}
				}, 500);
			},
			stopProgressUpdate() {
				if (this.progressInterval) {
					clearInterval(this.progressInterval);
					this.progressInterval = null;
				}
			}
		},
		onUnload() {
			if (this.audioContext) {
				this.audioContext.destroy();
			}
			this.stopProgressUpdate();
		}
	};
</script>

<style>
	.quanju {
		background-color: #f5f5f5;
		padding: 20rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.scroll-container {
		height: calc(100vh - 20rpx);
		overflow-y: auto;
	}

	.section-container {
		background: #fff;
		border: 1rpx solid #eee;
		border-radius: 16rpx;
		margin: 0 auto 20rpx;
		max-width: 750rpx;
	}

	.section-padding {
		padding: 24rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.section-subtitle {
		font-size: 30rpx;
		color: #666;
		margin-bottom: 24rpx;
	}

	.swiper-container {
		width: 100%;
		height: 420rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.intro-row {
		display: flex;
		margin-bottom: 18rpx;
		line-height: 1.6;
	}

	.intro-label {
		font-size: 28rpx;
		color: #222;
		font-weight: bold;
		min-width: 130rpx;
	}

	.intro-content {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	/* 特色文化文本 */
	.culture-text {
		font-size: 28rpx;
		color: #333;
	}

	.culture-text span {
		color: #007AFF !important;
		font-weight: bold !important;
		margin: 0 3rpx;
	}

	/* 进度条 */
	.progress-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.progress {
		activeColor: #007AFF;
		backgroundColor: #E5E5E5;
	}

	/* 城市选择器 */
	.current-selection {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.picker-display {
		padding: 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
	}

	/* 偏好设置行布局 */
	.setting-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.setting-row:last-child {
		border-bottom: none;
	}

	.setting-label {
		font-size: 28rpx;
		color: #333;
	}

	.setting-value {
		display: flex;
		align-items: center;
	}

	/* 开关样式 */
	.switch-control {
		transform: scale(0.9);
	}

	/* 进度条容器 */
	.slider-container {
		width: 420rpx;
		
	}

	.radius-slider {
		width: 100%;
		height: 10rpx;
	}

	/* 视频 */
	.city-video {
		width: 100%;
		height: 360rpx;
		border-radius: 8rpx;
	}

	/* 背景音乐模块 */
	.music-module {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-left: 20px;
		min-height: 8vh;
		box-sizing: border-box;
		background-color: #f5f5f5;
		padding: 12rpx;
		border-radius: 8rpx;
		margin: 12rpx 0;
		box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
		width: 100%;
	}

	.music-header {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.play-button {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #007AFF;
		color: white;
		border-radius: 8rpx;
		font-size: 24rpx;
		padding: 0;
		margin-bottom: 12rpx;
	}

	.music-source {
		font-size: 20rpx;
		color: #888;
		margin-bottom: 12rpx;
	}

	.progress-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10rpx;
	}

	.progress-slider {
		width: 100%;
		height: 16rpx;
		margin-bottom: 6rpx;
	}

	.progress-text {
		font-size: 20rpx;
		color: #666;
	}
</style>